<template>
<div class="table-responsive">
  <table class="table table-bordered">
    <tbody>
      <tr v-for="item in list">
        <td :style="{width: width}">{{item.name}}</td>
        <td>{{showValue(item)}}</td>
      </tr>
    </tbody>
  </table>        
</div>
</template>

<script>
export default {
  props: {
    width: {
      type: String,
      default: '30%'
    },
    list: {
      required: true
    }
  },
  methods: {
    showValue (item) {
      if (item.show) {
        return item.show(item.value)
      } else {
        return item.value
      }
    }
  }
}
</script>

<style>
</style>